<template>  
    <view class="container">  
		
		<view class="user-section">
			<!-- <image class="bg" :src="this.userInfo.avatarUrl"></image> -->
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="avatarUrl "></image>
				</view>
				<view class="info-box">
					<text class="username">{{nickName}}</text>
				</view>
			</view>
		</view>
		<!-- 位置/电话-->
		<view class="title-info icon">
				<view  class="title" >
					<text>店铺地址</text><br>
				</view>
		</view>
		<view class="address-phone-info icon">
				<view  class="address" >
					<text class="cell-icon yticon icon-dizhi icon-color-blue"></text>
					<text>&nbsp;&nbsp;{{address}}</text><br>
				</view>
				<view  class="phone">
		        	<text class="cell-icon yticon icon-dianhua-copy icon-color-red text_left"></text>
				</view>
		</view>
			<!-- 浏览历史 -->
			<!-- <view class="history-section icon">	 -->
	<!-- 		<list-cell icon="icon-shezhi1 " iconColor="#e07472" title="设置"  @eventClick="navTo('/pages/set/set')"></list-cell>
				<list-cell icon="icon-pinglun-copy" iconColor="#5fcda2" title="帮助" @eventClick="navTo('/pages/address/address')"></list-cell>
				<list-cell icon="icon-dianhua-copy" iconColor="#9789f7" title="联系我们" tips="电话咨询"></list-cell> -->
				<!-- <list-cell icon="icon-dizhi" iconColor="#ee883b" title="店铺位置" tips="定位"></list-cell> -->
			<!-- </view> -->
		<!-- </view> -->
			
		
    </view>  
</template>  
<script>  
	import listCell from '@/components/mix-list-cell';
	import service from '../../service.js';
    import {  
        mapState 
    } from 'vuex';  

    export default {
		components: {
			listCell
		},
		data() {
			return {
               avatarUrl:'/static/missing-face.png',
			   nickName:'游客',
			   address:''
			};
		},
		onLoad(){
			this.loadData();
		},
        computed: {
			...mapState(['hasLogin','userInfo'])
		},
        methods: {
			//点击电话按钮拨打电话
			toPhone:function(){
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
			//显示用户姓名，用户头像
			async loadData() {
				console.log("登陆状态："+this.hasLogin);
				if(!this.hasLogin){
					uni.showLoading({title: '正在加载',duration: 60000});
					let param=await service.weLogin();
					this.$store.commit("login",param);
					uni.hideLoading();
				} 
				//console.log("用户信息："+JSON.stringify(this.$store.state));
				console.log("用户头像："+this.userInfo.avatarUrl);
				console.log("用户名称："+this.userInfo.nickName);
				this.nickName=this.userInfo.nickName;
				this.avatarUrl=this.userInfo.avatarUrl;
				this.address=this.userInfo.address
            }
		}	
    }  
</script>  
<style lang='scss'>
	/* 地址,电话*/
	.address-phone-info{
		display:flex;
		align-items:center;
		color: $font-color-base;
		padding: 15upx 30upx;
		background-color: #ffffff;
		border-top: 1px solid #d8d8d8;
		border-bottom: 1px solid #d8d8d8;
		.address{
			width:80%;
			display:inline-block;
			vertical-align: middle;
			align-items:left;
			text{
				font-size: 28upx;
				font-weight: 700;
			}
		}
		.phone{
			width:20%;
			display:inline-block;
			text-align:right;
			vertical-align: middle;
			.text_left{
				font-size: 50upx;
				border-left:3rpx solid #d8d8d8;
				padding: 20upx;
			}
		}
	}
	
	.title-info{
		display:flex;
		align-items:center;
		color: $font-color-base;
		padding: 15upx 30upx;
		background-color: #ffffff;
		border-top: 1px solid #d8d8d8;
		.title{
			width:80%;
			display:inline-block;
			vertical-align: middle;
			align-items:left;
			text{
				font-size: 28upx;
				font-weight: 700;
			}
		}
	}

	.user-section{
		height: 450upx;
		padding: 100upx 30upx 0;
		position:relative;
		background-color: #FF6A6A;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 280upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		.portrait{
			width: 180upx;
			height: 180upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
	}

</style>